<template>
  <a-modal
    :open="open"
    :title="title"
    @update:open="(val) => $emit('update:open', val)"
    @ok="handleOk"
  >
    <a-form
      ref="formRef"
      style="margin-top: 20px"
      layout="vertical"
      :model="formState"
      :rules="rules"
    >
      <a-form-item label="真实姓名" name="realName">
        <a-input
          v-model:value="formState.realName"
          placeholder="请输入真实姓名"
          allow-clear
          :maxlength="20"
        />
      </a-form-item>
      <a-form-item label="登录密码" name="password">
        <a-input-password
          v-model:value="formState.password"
          placeholder="请输入登录密码"
          allow-clear
        />
      </a-form-item>
      <a-form-item label="确认登录密码" name="passwordAgain">
        <a-input-password
          v-model:value="formState.passwordAgain"
          placeholder="请再次输入登录密码"
          allow-clear
        />
      </a-form-item>
      <a-form-item label="所属组织" name="organization">
        <a-select
          v-model:value="formState.organization"
          placeholder="请选择所属组织"
          :options="organizationOptions"
          allow-clear
        />
      </a-form-item>
      <a-form-item label="所属单位" name="company">
        <a-input
          v-model:value="formState.company"
          placeholder="请输入所属单位"
          allow-clear
          :maxlength="20"
        />
      </a-form-item>
      <a-form-item label="所属部门" name="department">
        <a-input
          v-model:value="formState.department"
          placeholder="请输入所属部门"
          allow-clear
          :maxlength="20"
        />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script lang="ts" setup>
import { watch, ref } from 'vue'
import { useDepartmentForm } from './useDepartmentForm.ts'


const props = defineProps<{
  open: boolean
  title: string
  rowData: any
}>()

const emit = defineEmits(['update:open', 'success'])

const { formRef, rules, submitForm, formState, resetForm } = useDepartmentForm()

// 新增所属组织下拉选项
const organizationOptions = [
  { label: '组织A', value: 'orgA' },
  { label: '组织B', value: 'orgB' },
  { label: '组织C', value: 'orgC' },
]

watch(
  () => props.rowData,
  (newVal) => {
    resetForm()
    Object.assign(formState, newVal)
  },
)

const handleOk = async () => {
  const success = await submitForm()
  if (success) {
    emit('success')
  }
}
</script>
